<!DOCTYPE html>
<html lang="en">
<head>
    <!--适配手机端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }
    body,html{
      height: 100%;
      width: 100%;
      background-color: rgba(17, 21, 21, 0.39);
      overflow: auto;

    }
    .outer{
        height: 100%;
        width: 100%;
        background-color: rgb(16, 58, 17);
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        align-items: center;
    }
    .outer .videoWeb,.outer .myCollect{
        width: 98%;
        height: 44%;
        display: flex;
        flex-direction: column;

        align-items: center;
        overflow:auto;
    }
    .outer .top{
        width: 100%;
        height: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    .outer .videoWeb >div
    {
        border: 1px solid darkolivegreen;
        width: 98%;
        height: 30px;
        margin-top: 10px;
        flex-shrink: 0;
    }
    .outer .myCollect .collect{
        border: 1px solid darkolivegreen;
        width: 98%;
        margin-top: 10px;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow: auto;
    }
    .outer .videoWeb{
        border-bottom: 1px solid burlywood;
        border-top:  1px solid burlywood;

    }
    .outer .myCollect{
        border-top: 1px solid firebrick;
    }

    .outer .top div{
        margin-top: 3px;
        border: 1px solid black;
    }
  </style>
</head>
<body>
<div class="outer">
    <div class="top">
        <div onclick="addRule()">添加拦截规则</div>
        <div onclick="addUrl()">添加网站</div>
    </div>

    <div class="videoWeb"></div>
    <div>我的收藏</div>
    <div class="myCollect"></div>

</div>
</body>
<script src="http://localhost:8080/static/js/jquery.min.js"></script>
<script>
    let baseUrl="http://"+window.location.host+"/"
    getWebUrl()
    getCollect()
    function getWebUrl() {
        $.ajax({
            url: baseUrl + "getWebUrl",
            type: 'get',
            async: true,
            success: function (data) {
                if(data==="")
                {
                    let outer=document.querySelector(".videoWeb")
                    outer.innerHTML=""
                    return
                }
                let urls=data.split("\n")
                let html=""
                for(let i=0;i<urls.length;i++)
                {
                    let info=urls[i].split("__")
                    html=html+`<div style="display: flex;flex-direction: row;align-items: center">
            <div onclick="clickVideoWeb('${info[0]}')" style="width: 90%;border-right: 1px solid cadetblue">${info[0]} </div>
            <div onclick="deleteWebUrl('${info[1]}')" style="width: 10%">删除</div>
                </div>`
                }
                let outer=document.querySelector(".videoWeb")
                outer.innerHTML=""
                outer.innerHTML=html

            },
            error: function (data) {
                alert("获取视频网站出错")
            }
        })
    }

    function getCollect() {
        $.ajax({
            url: baseUrl + "getCollect",
            type: 'get',
            async: true,
            success: function (data) {
                if(data==="") {
                    let outer=document.querySelector(".myCollect")
                    outer.innerHTML=""
                    return
                }
                let collects=data.split("\n")
                let html=""
                for(let i=0;i<collects.length;i++)
                {
                    //console.log(collects+"\n")
                    let info=collects[i].split("__")
                    html = html + `<div class="collect" >
                <div onclick="clickVideoWeb('${info[0]}')" style="width: 90%;;overflow:auto;display: flex;flex-direction: column;align-items: center;border-right: 1px solid crimson">
                    <div >${info[0]}</div>
                    <div >标题：${info[1]}</div>
                    <div >备注：${info[2]}</div>
               </div>
                <div style="width: 10%" onclick="deleteCollect('${info[3]}')">删除</div>
                </div>`
                }
                let outer=document.querySelector(".myCollect")
                outer.innerHTML=""
                outer.innerHTML=html

            },
            error: function (data) {
                alert("获取收藏出错")
            }
        })

    }
    function addRule() {

        let rule=window.prompt("请输入拦截规则")
        if(rule!=null&&rule!=="")
        {
            $.ajax({
                url: baseUrl + "addRule",
                type: 'post',
                async: true,
                data:{rule:rule},
                success: function (data) {
                  alert("已添加")
                },
                error: function (data) {
                    alert("添加拦截规则出错")
                }
            })
        }
    }
    function addUrl() {

        let rule=window.prompt("请输入网站")
        if(rule!=null&&rule!=="")
        {
            $.ajax({
                url: baseUrl + "addUrl",
                type: 'post',
                async: true,
                data:{url:rule},
                success: function (data) {
                    alert("已添加")
                    getWebUrl()
                },
                error: function (data) {
                    alert("添加拦截规则出错")
                }
            })
        }
    }
    function deleteCollect(row) {
        $.ajax({
            url: baseUrl + "deleteCollect",
            type: 'post',
            async: true,
            data:{row:row},
            success: function (data) {
                getCollect()
            },
            error: function (data) {
                alert("删除收藏出错")
            }
        })
    }
    function deleteWebUrl(row) {
        $.ajax({
            url: baseUrl + "deleteWebUrl",
            type: 'post',
            async: true,
            data:{row:row},
            success: function (data) {
                getWebUrl()
            },
            error: function (data) {
                alert("删除网站出错")
            }
        })
    }
    function clickVideoWeb(url) {
        window.location.href=url
    }
</script>
</html>